<!-- hbox layout -->
<div class="hbox hbox-auto-xs bg-light " ng-init="
  app.settings.asideFixed = true;
  app.settings.asideDock = false;
  app.settings.container = false;
  app.hideAside = false;
  app.hideFooter = true;
  " ng-controller="NoteCtrl">
  <!-- column -->
  <div class="col w-lg lt b-r">
    <div class="vbox">
      <div class="wrapper">
        <div class="h4">养殖舍管理</div>
      </div>
      <div class="wrapper b-t m-t-xxs">
        <div class="input-group">
          <span class="input-group-addon input-sm"><i class="fa fa-search"></i></span>
          <input type="text" class="form-control input-sm" placeholder="搜索" ng-model="query">
        </div>
      </div>
      <div class="row-row">
        <div class="cell scrollable hover">
          <div class="cell-inner">
            <div class="padder">
              <div class="list-group">
                <a class="list-group-item b-l-success b-l-3x hover-anchor">
                  <span class="block text-ellipsis">所有房舍</span>
                </a>
                <a ng-repeat="note in notes | filter:query | orderBy:'date':true" class="list-group-item b-l-success b-l-3x hover-anchor" ng-class="{'hover': note.selected }" ng-click="selectNote(note)">

                  <span class="block text-ellipsis">·· &nbsp;{{ note.content ? note.content : 'Empty note' }}</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /column -->

  <!-- column -->
  <div class="col">
    <div class="vbox">
      <div class="table-responsive  padder-md">
        <table class="table table-striped b-t b-light m-b-none">
          <thead style="background-color: #c1eaf4">
          <tr>
            <th style="width:43px;"></th>
            <th style="width:170px;">栏舍名称</th>
            <th style="width:91px;">温度曲线</th>
            <th style="width:80px;">温度℃</th>
            <th style="width:80px;">湿度%</th>
            <th style="width:100px;">氨气ppm</th>
            <th style="width:80px;">光照lx</th>
            <th>设备状态</th>
          </tr>
          </thead>
        </table>
      </div>

      <div class="row-row">
        <div class="cell scrollable">
          <div class="cell-inner">
            <div class="tab-content">
              <div class="wrapper-md no-t-padder">
                <div class="panel panel-default">

                  <div class="table-responsive">
                    <table class="table table-striped b-t b-light">
                      <tbody style="font-size:20px">
                      <tr>
                        <td style="width:20px;">1</td>
                        <td style="width:170px;"><a ui-sref="app.unit">一线分娩1单元</a></td>
                        <td style="width:80px;"><div ng-init="data1=[ 12,15,19,14,17,18,13,12,17 ]" ui-jq="sparkline" ui-options="{{data1}}, {type:'line', height:28, width:60, lineColor:'{{app.color.primary}}', fillColor:'#fff'}" class="sparkline inline">loading...</div></td>
                        <td style="width:80px;">23</td>
                        <td style="width:80px;">83</td>
                        <td style="width:100px;">78</td>
                        <td style="width:80px;">783</td>
                        <td>设备状态</td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>一线分娩1单元</td>
                        <td>
                          <div ng-init="data3=[ 16,15,15,14,17,18,16,15,16 ]" ui-jq="sparkline" ui-options="{{data3}}, {type:'line', height:28, width:60, lineColor:'{{app.color.primary}}', fillColor:'#fff'}" class="sparkline inline">loading...</div>
                        </td>
                        <td>32</td>
                        <td>80</td>
                        <td>106</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Idr</td>
                        <td>4c</td>
                        <td>Jul</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Idr</td>
                        <td>4c</td>
                        <td>Jul</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Idr</td>
                        <td>4c</td>
                        <td>Jul</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Idr</td>
                        <td>4c</td>
                        <td>Jul</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Idr</td>
                        <td>4c</td>
                        <td>Jul</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Idr</td>
                        <td>4c</td>
                        <td>Jul</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Idr</td>
                        <td>4c</td>
                        <td>Jul</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Idr</td>
                        <td>4c</td>
                        <td>Jul</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Idr</td>
                        <td>4c</td>
                        <td>Jul</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Idr</td>
                        <td>4c</td>
                        <td>Jul</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Idr</td>
                        <td>4c</td>
                        <td>Jul</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Idr</td>
                        <td>4c</td>
                        <td>Jul</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Idr</td>
                        <td>4c</td>
                        <td>Jul</td>
                        <td></td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <footer class="panel-footer">
        <div class="row">
          <div class="col-sm-4 hidden-xs">
            <ul class="nav nav-pills nav-md pull-left">
              <li>
                <select class="input-sm form-control w-sm inline v-middle m-t-xs">
                  <option value="0">每页显示10条</option>
                  <option value="1">每页显示20条</option>
                  <option value="2">每页显示50条</option>
                  <option value="3">每页显示100条</option>
                </select>
              </li>
              <li>
                <label class="checkbox i-checks m-l-md">
                  <input type="checkbox" ng-model="oneAtATime"><i></i>
                  开启自动翻页
                </label>
              </li>
            </ul>
          </div>
          <div class="col-sm-4 text-center">
            <small class="text-muted inline m-t-sm m-b-sm">显示 20-30 条/ 共 50 条</small>
          </div>
          <div class="col-sm-4 text-right text-center-xs">
            <ul class="pagination pagination-xs m-t-none m-b-none">
              <li><a href><i class="fa fa-chevron-left"></i></a></li>
              <li><a href>1</a></li>
              <li><a href>2</a></li>
              <li><a href>3</a></li>
              <li><a href>4</a></li>
              <li><a href>5</a></li>
              <li><a href><i class="fa fa-chevron-right"></i></a></li>
            </ul>
          </div>
        </div>
      </footer>

    </div>
  </div>
  <!-- /column -->
</div>
<!-- /hbox layout -->